@extends(admin.layout)
@section("css"){
 <!--附加css-->
}
<div class="margin-container">
    <!--scrollable wrapper start-->
    <div class="scrollable wrapper">
        <!--row start-->
        <div class="row">
            <!--col-md-12 start-->
            <div class="col-md-12">
                <div class="page-heading">
                    <h1>仪表盘 <small>数据报表主页</small></h1>
                </div>
            </div>
            <!--col-md-12 end-->
            <div class="col-sm-6 col-md-3">
                <div class="box-info">
                    <div class="title-box">
                        <h3>会员</h3>
                        <div class="blue-bg">
                            <p>系统会员数</p>
                            <h1> 329</h1>
                        </div>
                        <i class="fa fa-users"></i>
                        <div id="work-progress1" class="pull-right"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="box-info">
                    <div class="title-box">
                        <h3>项目</h3>
                        <div class="red-bg">
                            <p>用户创建的项目数</p>
                            <h1> 47</h1>
                        </div>
                        <i class="fa fa-inbox"></i>
                        <div id="work-progress2" class="pull-right"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="box-info">
                    <div class="title-box">
                        <h3>订单数量</h3>
                        <div class="green-bg">
                            <p>商城下单的订单数量</p>
                            <h1> 57</h1>
                        </div>
                        <i class="fa fa-truck"></i>
                        <div id="work-progress3" class="pull-right"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="box-info">
                    <div class="title-box">
                        <h3>接口请求数</h3>
                        <div class="maroon-bg">
                            <p>所有外部API请求数量统计</p>
                            <h1> 997799899</h1>
                        </div>
                        <i class="fa fa-retweet"></i>
                        <div id="work-progress4" class="pull-right"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--row end-->
        <div class="row">
            <div class="col-md-12">
                <div class="box-info">

                    <div id="chart1" style="width:100%; height:400px;"></div>

                </div>
            </div>
            <!--col-md-12 end-->
        </div>
        <!--row end-->

        <!--row start-->
        <div class="row">
            <!--col-md-6 start-->
            <div class="col-md-6">
                <!--box-info start-->
                <div class="box-info">
                    <h4>To Do List </h4>
                    <!--sortable-todo start-->
                    <ul id="sortable-todo" class="to-do-list">
                        <li class="clearfix"> <span class="drag-marker"> <i></i> </span>
                            <div class="todo-check pull-left">
                                <input type="checkbox" id="todo-check" value="None">
                                <label for="todo-check"></label>
                            </div>
                            <p class="todo-title"> Lorem ipsum dolor sit amet, consectetuer adipiscing </p>
                            <div class="todo-actionlist pull-right clearfix"> <a class="todo-done" href="#"><i class="fa fa-check"></i></a> <a class="todo-edit" href="#"><i class="fa fa-pencil"></i></a> <a class="todo-remove"><i class="fa fa-times icon-muted"></i></a> </div>
                        </li>
                        <li class="clearfix todo-list-active"> <span class="drag-marker"> <i></i> </span>
                            <div class="todo-check pull-left">
                                <input type="checkbox" id="todo-check1" value="None">
                                <label for="todo-check1"></label>
                            </div>
                            <p class="todo-title"> Lorem ipsum dolor sit amet, consectetuer adipiscing </p>
                            <div class="todo-actionlist pull-right clearfix"> <a class="todo-done" href="#"><i class="fa fa-check"></i></a> <a class="todo-edit" href="#"><i class="fa fa-pencil"></i></a> <a class="todo-remove"><i class="fa fa-times icon-muted"></i></a> </div>
                        </li>
                        <li class="clearfix"> <span class="drag-marker"> <i></i> </span>
                            <div class="todo-check pull-left">
                                <input type="checkbox" id="todo-check2" value="None">
                                <label for="todo-check2"></label>
                            </div>
                            <p class="todo-title"> Lorem ipsum dolor sit amet, consectetuer adipiscing </p>
                            <div class="todo-actionlist pull-right clearfix"> <a class="todo-done" href="#"><i class="fa fa-check"></i></a> <a class="todo-edit" href="#"><i class="fa fa-pencil"></i></a> <a class="todo-remove"><i class="fa fa-times icon-muted"></i></a> </div>
                        </li>
                        <li class="clearfix"> <span class="drag-marker"> <i></i> </span>
                            <div class="todo-check pull-left">
                                <input type="checkbox" id="todo-check3" value="None">
                                <label for="todo-check3"></label>
                            </div>
                            <p class="todo-title"> Lorem ipsum dolor sit amet, consectetuer adipiscing </p>
                            <div class="todo-actionlist pull-right clearfix"> <a class="todo-done" href="#"><i class="fa fa-check"></i></a> <a class="todo-edit" href="#"><i class="fa fa-pencil"></i></a> <a class="todo-remove"><i class="fa fa-times icon-muted"></i></a> </div>
                        </li>
                        <li class="clearfix"> <span class="drag-marker"> <i></i> </span>
                            <div class="todo-check pull-left">
                                <input type="checkbox" id="todo-check4" value="None">
                                <label for="todo-check4"></label>
                            </div>
                            <p class="todo-title"> Lorem ipsum dolor sit amet, consectetuer adipiscing </p>
                            <div class="todo-actionlist pull-right clearfix"> <a class="todo-done" href="#"><i class="fa fa-check"></i></a> <a class="todo-edit" href="#"><i class="fa fa-pencil"></i></a> <a class="todo-remove"><i class="fa fa-times icon-muted"></i></a> </div>
                        </li>
                        <li class="clearfix"> <span class="drag-marker"> <i></i> </span>
                            <div class="todo-check pull-left">
                                <input type="checkbox" id="todo-check5" value="None">
                                <label for="todo-check5"></label>
                            </div>
                            <p class="todo-title"> Lorem ipsum dolor sit amet, consectetuer adipiscing </p>
                            <div class="todo-actionlist pull-right clearfix"> <a class="todo-done" href="#"><i class="fa fa-check"></i></a> <a class="todo-edit" href="#"><i class="fa fa-pencil"></i></a> <a class="todo-remove"><i class="fa fa-times icon-muted"></i></a> </div>
                        </li>
                    </ul>
                    <!--sortable-todo end-->
                    <!--todo-action-bar start-->
                    <div class="todo-action-bar">
                        <!--row start-->
                        <div class="row">
                            <div class="col-xs-3 btn-todo-select">
                                <button class="btn btn-default" type="submit"><i class="fa fa-check"></i> Select All</button>
                            </div>
                            <div class="col-xs-6 todo-search-wrap">
                                <input type="text" placeholder=" Search" class="form-control search todo-search pull-right">
                            </div>
                            <div class="col-xs-3 btn-add-task">
                                <button class="btn btn-default btn-danger" type="submit"><i class="fa fa-plus"></i> Add Task</button>
                            </div>
                        </div>
                        <!--row end-->
                    </div>
                    <!--todo-action-bar end-->
                </div>
                <!--box-info end-->
            </div>
            <!--col-md-6 end-->

            <!--col-md-6 start-->
            <div class="col-md-6">
                <div class="box-info">
                    <h4>User Accounts</h4>
                    <div style="overflow-x:auto" class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th width="6%"><input type="checkbox" id="select-all"></th>
                                <th width="22%">User ID</th>
                                <th width="50%">Email Address</th>
                                <th width="22%">Status</th>
                            </tr>
                            </thead>
                            <form>
                                <tbody class="selects">
                                <tr>
                                    <td><input type="checkbox" class="checkbox1"></td>
                                    <td>Dean</td>
                                    <td>deane@\yahoo.com</td>
                                    <td><span class="label label-success">Approved</span></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox1"></td>
                                    <td>Peter</td>
                                    <td>peters@\live.com</td>
                                    <td><span class="label label-info">Pending</span></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox1"></td>
                                    <td>Nathan</td>
                                    <td>nathanl@\gmail.com</td>
                                    <td><span class="label label-warning">Suspended</span></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox1"></td>
                                    <td>Steven</td>
                                    <td>stevens@\outlook.com</td>
                                    <td><span class="label label-danger">Blocked</span></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox1"></td>
                                    <td>Graeme</td>
                                    <td>graemes@\gmail.com</td>
                                    <td><span class="label label-info">Pending</span></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox1"></td>
                                    <td>Morne</td>
                                    <td>mornem@\gmail.com</td>
                                    <td><span class="label label-warning">Suspended</span></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox1"></td>
                                    <td>Quinton</td>
                                    <td>quintonk@\outlook.com</td>
                                    <td><span class="label label-danger">Blocked</span></td>
                                </tr>
                                </tbody>
                            </form>
                            <tfoot>
                            <tr class="active">
                                <td class="text-left" colspan="4"><label style="margin-bottom:0" for="action">Action </label>
                                    <select name="action">
                                        <option value="Edit">Edit </option>
                                        <option value="Aprove">Aprove </option>
                                        <option value="Move">Move </option>
                                        <option value="Delete">Delete </option>
                                    </select></td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            <!--col-md-6 end-->
        </div>
        <!--row end-->

        <!--row start-->
        <div class="row">

            <!--col-md-6 start-->
            <div class="col-md-6">
                <div class="box-info">
                    <h4>Notification</h4>
                    <div class="alert alert-info clearfix"> <span class="alert-icon"><i class="fa fa-envelope-o"></i></span>
                        <div class="notification-info">
                            <ul class="clearfix notification-meta">
                                <li class="pull-left notification-sender"><span><a href="#">Scott henderson</a></span> send you a mail </li>
                                <li class="pull-right notification-time">5 min ago</li>
                            </ul>
                            <p> Urgent meeting for next proposal </p>
                        </div>
                    </div>
                    <div class="alert alert-danger"> <span class="alert-icon"><i class="fa fa-facebook"></i></span>
                        <div class="notification-info">
                            <ul class="clearfix notification-meta">
                                <li class="pull-left notification-sender"><span><a href="#">Peter Siddle</a></span> mentioned you in a post </li>
                                <li class="pull-right notification-time">9 Hours Ago</li>
                            </ul>
                            <p> Very cool photo John </p>
                        </div>
                    </div>
                    <div class="alert alert-success "> <span class="alert-icon"><i class="fa fa-comments-o"></i></span>
                        <div class="notification-info">
                            <ul class="clearfix notification-meta">
                                <li class="pull-left notification-sender">You have 7 message unread</li>
                                <li class="pull-right notification-time">2 min ago</li>
                            </ul>
                            <p> <a href="#">John Doe, Jack Flip</a> and <a href="#">6 others</a> </p>
                        </div>
                    </div>
                    <div class="alert alert-warning "> <span class="alert-icon"><i class="fa fa-bell-o"></i></span>
                        <div class="notification-info">
                            <ul class="clearfix notification-meta">
                                <li class="pull-left notification-sender">Domain Renew Deadline 7 days ahead</li>
                                <li class="pull-right notification-time">5 Days Ago</li>
                            </ul>
                            <p> Next 5 August Friday is the last day </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--col-md-6 end-->

            <!--col-md-6 start-->
            <div class="col-md-6">
                <div class="kalendar"></div>
                <div class="list-group"> <a class="list-group-item text-ellipsis" href="#"> <span class="badge bg-danger">6:40</span> Consectetuer </a> <a class="list-group-item text-ellipsis" href="#"> <span class="badge bg-success">12:50</span> Lorem ipsum dolor sit amet </a> <a class="list-group-item text-ellipsis" href="#"> <span class="badge bg-light">17:30</span> Consectetuer adipiscing </a> </div>
            </div>
            <!--col-md-6 end-->
        </div>
        <!--row end-->

        <!--row start-->
        <div class="row">
            <!--col-md-8 start-->
            <div class="col-md-8">
                <div class="box-info">
                    <div id="chart2" style="width:100%; height:300px"></div>
                </div>
            </div>
            <!--col-md-8 end-->

            <!--col-md-4 start-->
            <div class="col-md-4">
                <div class="box-info">
                    <div class="block widget-notes">
                        <div class="header dark">
                            <h4>Notes</h4>
                        </div>
                        <div contenteditable="true" class="paper"> Send e-mail to supplier<br>
                            <s>Conference at 4 pm.</s><br>
                            <s>Order a pizza</s><br>
                            <s>Buy flowers</s><br>
                            Buy some coffee.<br>
                            Dinner at Plaza.<br>
                            Take Alex for walk.<br>
                        </div>
                    </div>
                </div>
            </div>
            <!--col-md-4 end-->
        </div>
        <!--row end-->

    </div>
    <!--scrollable wrapper end-->
</div>
@section("js"){
<!--附加js-->
}